<style>
        .cross{
                text-align: center;
                color:red;
                position: absolute;
                margin-left: 180px;
                margin-top:0px;
                height:18px;
                width:18px;
                z-index: 99;
                background: #FFF;
                border:2px solid red;
                border-radius: 50%;
                font-size: 14px;
                font-weight: bold;
        }
        .cross:hover{
                color:red;
                box-shadow: 0 0 6px red;
        }
        .cancel{
                display:inline-block;
                margin-left:10px;
        }
        .week{
                display: inline-block;
        }
</style>
<div class="bjui-pageContent" >
        <div data-layout-h="0">
                <!-- 内容区 -->
                <form class="pageForm nice-validator n-red" data-loadingmask='false' data-toggle="validate" novalidate="novalidate" data-reload-navtab="true" method="post" onsubmit="return add_trip(this);">
                        <input type="hidden" name="id" value="" />
                        <table class="table table-condensed table-hover add_trip" >
                                <tr>
                                        <th ><label style='margin-left:40px;'>标题：</label></th>
                                        <td>
                                                <input data-rule='required' id="trip_title" name="title" size="30" />
                                        </td>

                                </tr>
                                <tr>
                                        <th ><label style='margin-left:40px;'>橱柜简介详情：</label></th>
                                        <td>
                                                <textarea cols="40" data-min-height='300' data-toggle="kindeditor" name="content" ></textarea>
                                        </td>

                                </tr>
                                <tr>
                                        <th ><label style='margin-left:40px;'>缩略图：</label></th>
                                        <td>
                                                <div style="display:inline-block; vertical-align:middle;">
                                                        <div id="trips_pic_up" data-toggle="upload" data-uploader="{:U('Pub/image_upload_thumb?path=trips')}" 
                                                             data-file-size-limit="1024000000"
                                                             data-file-type-exts="*.jpg;*.png;*.gif;*.mpg"
                                                             data-multi="true"
                                                             data-on-upload-success="trips_upload_success"
                                                             data-icon="cloud-upload"
                                                             data-preview-img ='false'
                                                             data-auto='true'></div>
                                                        <br/>
                                                        <span id="j_trips_span_pic">
                                                        </span>
                                                </div>
                                                <div class="alert alert-warning form-inline"><i class="fa fa-warning"></i>3-4张为好,图片会被等比缩放</div>
                                        </td>
                                </tr>

                        </table>

                </form>
        </div>

</div>
<div class="bjui-pageFooter" border='none'>
        <ul>
                <li><button type="button" class="btn btn-close">关闭</button></li>
                <li><button type="submit" class="btn btn-default">提交</button></li>
        </ul>
</div>
<script id="tripTemplate" type="text/html">
        <li>
                <div class="panel panel-default" id="{id}">
                        <div class="panel-heading panelContent" > 
                                <h4 class="panel-title" >
                                        第<span class="day"></span>天 {title}
                                        <a href="javascript:;" class="cross" id="trip_edit" style="margin-left:0px; right:90px;color:red;"  >&#43;</a>
                                        <a href="javascript:;" class="cross" id="delete" style="margin-left:0px; right:30px;color:red;" >X</a>
                                        <a data-toggle="collapse" href="#trip-collapse{id}" class="cross" style="margin-left:0px; right:60px;color:red;">&#9660; </a>
                                </h4>
                        </div>
                        <div  id="trip-collapse{id}"class="panel-collapse panelContent collapse">
                                <table style="margin-left:20px;">
                                        <tr>
                                                <td>
                                                       
                                                        <input type="hidden" name="trip[{id}][title]" value="{title}" />
                                                        <textarea style="display:none;" name="trip[{id}][content]">{content}</textarea>
                                                </td>
                                        </tr>
                                        <tr>
                                                <td>                            
                                                        {content.replace(/<[^>].*?>/g, "")}
                                                </td>
                                        </tr>
                                        <tr>

                                                <td>
                                                        {each images as value index}
                                                        <img src="{value}" width="200"/>
                                                        <input type="hidden" name="trip[{id}][images][{index}]" value="{value}" />
                                                        {/each}
                                                </td>
                                        </tr>
                                </table>
                        </div>
                </div>
        </li>
</script>
<script type="text/html" id="imageTemplate">
        <div class="cancel" >
                <a class="cross" href="javascript:;" onclick=" $(this).parent().remove();">X</a>
                <img src="{image}" width="200" /> <input type="hidden" name="images" value="{image}" />
        </div>
</script>
<script type="text/javascript">
        var trip_id;
        $(function() {
                var dialog = $.CurrentDialog;
                //在bjui-dialog中重构了param的data传参方法，BY胡小奇
                var param = dialog.data('param');
                if (param) {
                        trip_id = param.id;
                        $("input[name='title']", ".add_trip").val(param.title);
                        $("textarea[name='content']", ".add_trip").val(param.content);
                        $.each(param.images, function(i, v) {
                                $("#j_trips_span_pic", ".add_trip").append(template('imageTemplate', {image: v}));
                        });
                } else {
                        trip_id = "trip_" + $("#trip_drag").children().size();
                }
        });
        function add_trip(form) {
                var $form = $(form);
                if ($form.find("input[name='title']").val() === '') {
                        return false;
                }
                var data = {};
                $.each($form.serializeArray(), function(k, v) {
                        if (v.name === 'images') {
                                if (!$.isArray(data[v.name]))
                                        data[v.name] = [];
                                data[v.name].push(v.value);
                        } else {
                                data[v.name] = v.value;
                        }
                });
                data['id'] = trip_id;
                var html = $(template("tripTemplate", data)).html();
                if ($("#" + trip_id).size() > 0) {
                        $("#" + trip_id).replaceWith(html);
                        $("#trip_drag").find('.day').each(function(i) {
                                $(this).text(i + 1);
                        });
                } else {
                        $("#trip_drag").append('<li>' + html + '</li>').initui();
                        $("#trip_drag").find('.day').each(function(i) {
                                $(this).text(i + 1);
                        });
                }
                $(this).dialog('closeCurrent');
                return false;
        }
        function closeTrip() {
                $(this).parent().parent().parent().remove();
                sortday();
        }
        function trips_upload_success(file, data) {
                var json = $.parseJSON(data)
                $(this).bjuiajax('ajaxDone', json)
                if (json[BJUI.keys.statusCode] == BJUI.statusCode.ok) {
                        $('#j_trips_span_pic').append('<div class="cancel" ><a class="cross" href="javascript:;" onclick=" $(this).parent().remove();">X</a>' + '<img src="' + json.filename + '" width="200" /><input type="hidden" name="images" value="' + json.filename + '" /></div>')
                }
        }
        function sortday() {
                $("#trip_drag").find('.day').each(function(i) {
                        $(this).text(i + 1);
                });
        }
</script>
